<!-- 这是一个选择客户的组件，可以输入客户姓名，手机号、学生姓名、id、来搜索客户。在搜索的结果中选择客户 -->

<template>
    <div>
        <v-text-field
            v-model="props.modelValue"
            label="客户信息"
            variant="outlined"
            density="compact"
            :rules="rules.studentId"
            hide-details="auto"
            @click="open"
        />

        <v-dialog v-model="dialogFormVisible" max-width="900px"  scrollable >
            <v-card class="elevation-10 ma-2">
                <v-card-title>
                    <v-icon>mdi-account-search</v-icon>
                    {{ title }}
                </v-card-title>
                <v-card-text>
                    <v-row>
                            <v-col cols="12" xs="12" sm="3" md="3" lg="3" xl="3">
                                <v-text-field
                                    v-model="queryParams.studentQP!.name_LIKE"
                                    label="学生姓名"
                                    variant="outlined"
                                    density="compact"
                                    :rules="rules.studentId"
                                    hide-details="auto"
                                />
                            </v-col>
                            <v-col cols="12" xs="12" sm="3" md="3" lg="3" xl="3">
                                <v-text-field
                                    v-model="queryParams.customerQP!.name_LIKE"
                                    label="客户姓名"
                                    variant="outlined"
                                    density="compact"
                                    :rules="rules.studentId"
                                    hide-details="auto"
                                />
                            </v-col>
                           
                            <v-col cols="12" xs="12" sm="3" md="3" lg="3" xl="3">
                                <v-text-field
                                    v-model="queryParams.id_EQ"
                                    label="ID"
                                    variant="outlined"
                                    density="compact"
                                    :rules="rules.studentId"
                                    hide-details="auto"
                                />
                            </v-col>

                            <v-col cols="12" xs="12" sm="3" md="3" lg="3" xl="3">
                                <v-text-field
                                    v-model="queryParams.customerQP!.phone_LIKE"
                                    label="手机号"
                                    variant="outlined"
                                    density="compact"
                                    :rules="rules.studentId"
                                    hide-details="auto"
                                />
                            </v-col>
                    </v-row>

                    <v-row class="ma-2 mt-4">
                        <div v-for="item in customerList" @click="handleSelect(item)" @dblclick="dblclick(item)" :class="{'bg-lightprimary': selectedCustomer.includes(item)}" :key="item.id" class="d-flex align-center gap-2 hover-card pa-2  border pl-4 pr-4 cursor-pointer elevation-10" style="border-radius: 10px;">
                            <!-- 选中效果 -->
                            <div  >
                                <CustomerAndStudentCard :item="item" />
                            </div>
                        </div>
                        <div v-if="customerList.length === 0">
                            <v-alert type="info" variant="tonal" density="compact">
                                没有找到客户
                            </v-alert>
                        </div>


                    </v-row>

                    <div class="d-flex justify-center">
                            <v-pagination v-model="queryParams.pageNo" :length="total" />
                    </div>
                   
                </v-card-text>
                <v-card-actions>
                    <v-spacer />
                    <v-btn color="grey-darken-1" variant="text" @click="close">关闭</v-btn>
                    <v-btn color="primary" variant="text" @click="confirm">确认选择</v-btn>
                </v-card-actions>
            </v-card>
        </v-dialog>
    </div>

</template>

<script setup lang="ts">
import {
    getListWithDetails,
    doDelete,
    doDeleteAll,
    doExportExcel,
    doImportExcel,
    doDownloadTemplate,
    type CustomerStudentRelationModel,
    type CustomerStudentRelationQueryParams,
    type ApiResponse,
    type PageResult
} from '@/api/customer/customerrelation/CustomerStudentRelationManagementApi';
import CustomerAndStudentCard from './CustomerAndStudentRard.vue';
import { ref, reactive, nextTick, onMounted, computed, watch } from 'vue';
import { useMessage } from '@/composables/useMessage';
const { success: showSuccess, error: showError } = useMessage();
const queryParams = reactive<CustomerStudentRelationQueryParams>({
    pageNo: 1,
    pageSize: 10,
    customerQP: {
        name_LIKE: '',
        phone_LIKE: '',
    },
    studentQP: { 
        name_LIKE: '',
    },
    id_EQ: ''

});

    const props = defineProps<{
        modelValue: CustomerStudentRelationModel;
    }>();

    const emit = defineEmits(['select']);

    const total = ref(0);

    const selectedCustomer = ref<CustomerStudentRelationModel[]>([]);

    const handleSelect = (item: CustomerStudentRelationModel) => {

        if(selectedCustomer.value.includes(item)) {
            selectedCustomer.value = selectedCustomer.value.filter(i => i.id !== item.id);
        } else {
            selectedCustomer.value.push(item);
        }
    };

    const confirm = () => {
        emit('select', selectedCustomer.value);
        close();
    };

    const dblclick = (item: CustomerStudentRelationModel) => {

        if(selectedCustomer.value.includes(item)) {
            selectedCustomer.value = selectedCustomer.value.filter(i => i.id !== item.id);
        } else {
            selectedCustomer.value.push(item);
        }
        emit('select', selectedCustomer.value);
        close();
    };

    const form = ref({
        studentId: '',
        studentName: ''
    });

    const rules = ref({
        studentId: [
            (v: any) => !!v || '客户信息不能为空',
        ],
    });

    const customerList = ref<CustomerStudentRelationModel[]>([]);
    const title = ref('选择客户');
    const dialogFormVisible = ref(false);

    const open = () => {
        dialogFormVisible.value = true;
        fetchData();
    };

    const close = () => {
        dialogFormVisible.value = false;
    };

    async function fetchData() {
        const {data,code,msg} = await getListWithDetails(queryParams);
        if(code === 0) {
            customerList.value = data.rows;
            total.value = data.total;
        } else {
            showError(msg);
        }
    }

    defineExpose({
        open,
        close,
    });
    </script>

    <style scoped>
 
    </style>
